<template>
  <div>
    <el-row>
      <el-col :span="24" class="addRole">
        <!-- 查询 -->
        <el-popover placement="bottom-start" width="1000" style="margin-right:10px;" trigger="click">
          <el-form :inline="true" :model="search">
              <el-form-item label="图纸编号" >
                  <el-input v-model="search.drawCode"></el-input>
              </el-form-item>
              <el-form-item label="生产令号" >
                  <el-input v-model="search.makeNo"></el-input>
              </el-form-item>
              <el-form-item label="任务流水号" >
                  <el-input v-model="search.taskSerialNo"></el-input>
              </el-form-item>
              <!-- <el-form-item label="自定义编码" >
                  <el-input v-model="search.code"></el-input>
              </el-form-item> -->

              <el-form-item label="任务单号" >
                  <el-input v-model="search.taskNo"></el-input>
              </el-form-item>
              <el-form-item label="客户" >
                  <el-input v-model="search.customer"></el-input>
              </el-form-item>
              <el-form-item label="29所编码" >
                  <el-input v-model="search.code29"></el-input>
              </el-form-item>
              
              <el-button type="primary" @click="searchBtn">确认</el-button>
          </el-form>
          <el-button slot="reference" type="primary" icon="el-icon-search">查询</el-button>
        </el-popover>
              <el-button type="primary" @click="showDialog4">导入</el-button>
      </el-col>
    </el-row>
    <!-- 29所列表 -->
    <tableList29Input ref="tableList29" :postData="postData">
      <template v-slot:default="scope" >
        <el-button @click="showDialog('update',scope.row)" type="text" size="small">详情</el-button>
        <el-button @click="confirmHandle(scope.row)" type="text" size="small">
          <el-link type="success">到料签收</el-link>
        </el-button>
      </template>
    </tableList29Input>
    <!-- 计划任务详情 -->
    <el-dialog class="bodyNopaddingTop" :title="dialog.title" :visible.sync="dialog.isShow"  v-dialogDrag width="1100px"  @opened="openedDialog">
      <el-tabs v-model="dialog.activeName" @tab-click="dialogHandleClick">
        <el-tab-pane label="详情" name="1">
            <taskDetail29 :detailObj="dialog.formData" :type="dialog.type" :editDisalbe="true"></taskDetail29>
        </el-tab-pane>
        <!-- 工艺编制列表 -->
        <el-tab-pane label="工艺编制" name="6" v-if="dialog.type==='update'">
          <processPlanList ref="processPlanListRef" :drawCode="dialog.drawCode" :formData="dialog.formData" :isApiType="1">
            <template v-slot:default="scope" >
              <el-button @click="showDialog2('update',scope.row)" type="text" size="small">详情</el-button>
              <el-button @click="showDialog2('upload',scope.row)" type="text" size="small">工艺上传列表</el-button>
            </template>
          </processPlanList>
        </el-tab-pane>

        <el-tab-pane label="29所工艺" name="2" v-if="dialog.type==='update'">
          <!-- <el-button type="primary" @click="showDialog1('insert')">新增</el-button> -->
         <processPlanList29 :data="dialog.formData" ref="processPlanList29Ref">
              <template v-slot:default="scope">
                <el-button @click="showDialog1('update',scope.row)" type="text" size="small">详情</el-button>
              </template>
          </processPlanList29>
        </el-tab-pane>

        <el-tab-pane label="图纸上传" name="3" v-if="dialog.type==='update'">
          <uploadList :upLoadType="1" :drawNo="dialog.drawCode"  ref="drawing"></uploadList>
        </el-tab-pane>
        <el-tab-pane label="工艺上传" name="4" v-if="dialog.type==='update'">
           <uploadList :upLoadType="2" :drawNo="dialog.drawCode"  ref="technology"></uploadList>
        </el-tab-pane>
        <el-tab-pane label="图形文件上传" name="5" v-if="dialog.type==='update'">
           <uploadList :upLoadType="3" :drawNo="dialog.drawCode"  ref="graphicsFile"></uploadList>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <!-- 新增编辑29所计划任务详情 -->
    <el-dialog class="bodyNopaddingTop" :title="dialog1.title" :visible.sync="dialog1.isShow" v-dialogDrag>
      <processPlanDetail29 :formData="dialog1.formData" :type="dialog1.type" :tid="dialog.formData.tid" :disabled='true'></processPlanDetail29>
    </el-dialog>

    <!-- 新增/编辑工艺编制 -->
    <el-dialog class="bodyNopaddingTop" :title="dialog2.title" :visible.sync="dialog2.isShow" v-dialogDrag @opened="dialog2Opened" :close-on-click-modal="false" >
      <div v-if="dialog2.type==='upload'">
        <uploadList :upLoadType="dialog2.formData.name" :drawNo="dialog2.formData.drawNo" :processId="dialog2.formData.id" ref="processUploadRef"></uploadList>
      </div>
      <div v-else>
        <processPlanDetail :drawCode="dialog.drawCode" :detail="dialog2.formData" :type="dialog2.type"  :editDisalbe="true"></processPlanDetail>
      </div>
    </el-dialog>
    <!-- Excel 导入弹框-->
    <el-dialog class="bodyNopaddingTop" :title="dialog4.title" :visible.sync="dialog4.isShow" :close-on-click-modal="false" v-dialogDrag >
      <div>
      <el-form :model="dialog4.formData" :rules="dialog4.rules" ref="excelRef" label-width="130px" :inline="true">
        <!-- <el-form-item label="计划所属年月" prop="belongToYearMonth" >
           <el-date-picker v-model="dialog4.formData.belongToYearMonth" type="month" placeholder="选择年月" format="yyyy-MM" value-format="yyyy-MM" class="width220 noMargin"></el-date-picker>
        </el-form-item>
        <el-form-item label="计划所属周" prop="belongToWeek" >
          <el-select v-model="dialog4.formData.belongToWeek" placeholder="请选择" class="width220 noMargin">
            <el-option label="第一周" :value="1"></el-option>
            <el-option label="第二周" :value="2"></el-option>
            <el-option label="第三周" :value="3"></el-option>
            <el-option label="第四周" :value="4"></el-option>
            <el-option label="第五周" :value="5"></el-option>
        </el-select>
        </el-form-item> -->
        <el-form-item label="上传文件" class="form-item-block">
         <el-upload class="upload-excel text-center" drag action="string" multiple :limit="1" ref="uploadExcelRef"
          :http-request="httpRequest"
          accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" :auto-upload="false">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传Excel文件</div>
          </el-upload>
        </el-form-item>
        <el-form-item class="form-item-block text-center">
          <el-button type="primary" @click="uploadExcel()">上传</el-button>
        </el-form-item>
      </el-form>
      </div>
    </el-dialog>
    <el-dialog width="400px" title="到料签收" :visible.sync="dialog3.isShow" v-dialogDrag  :close-on-click-modal="false" >
        <el-form ref="form" :model="confirmForm" label-width="300"  class="demo-panle">
            <el-form-item label="到料日期:">
              <el-date-picker v-model="confirmForm.materialArriveTime" type="date" placeholder="选择日期" format="yyyy-MM-dd hh:mm:ss" value-format="yyyy-MM-dd hh:mm:ss" class="width220 noMargin"></el-date-picker>
            </el-form-item> 
            <el-form-item label="29所条码编号:">
              <el-input v-model="confirmForm.code29" style="width:200px;"></el-input>
            </el-form-item>
            <el-form-item label="">
              <el-button  style="float:right; margin-left:3px;"  type="danger"   @click="dialog3.isShow = false">取消</el-button>
              <el-button  style="float:right; margin-left:3px;"  type="primary"  @click="submitConfirmBox">确定</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
  </div>
</template>
<script>
import pdf from 'vue-pdf';
import planApi from 'plugins/axios/planApi.js';
import baseApi from 'plugins/axios/baseApi.js';
import materielApi from 'plugins/axios/materielApi.js';
import uploadList from 'views/components/uploadList.vue' /**1-图纸上传、2-工艺上传、3-图形文件上传 的列表组件 */
import tableList29Input from 'views/components/tableList29Input.vue' /**29所列表组件 */
import taskDetail29 from 'views/components/taskDetail29.vue' /**29所任务详情组件 */
import processPlanList29 from 'views/components/processPlanList29.vue' /**29所工序列表组件 */
import processPlanDetail29 from 'views/components/processPlanDetail29.vue' /**29所工序详情组件 */
import processPlanList from 'views/components/processPlanList.vue' /**工艺编制列表组件 */
import processPlanDetail from 'views/components/processPlanDetail.vue' /**新增编辑工艺编制组件 */
processPlanList
export default {
  components: {
    pdf,
    uploadList,
    tableList29Input,
    taskDetail29,
    processPlanList29,
    processPlanDetail29,
    processPlanList,
    processPlanDetail
  },
  data(){
    return {
      confirmForm:{

      },
      isShowConfirmBox:false,
      status:'0',
      postData:{
        isUploadDraw:1,
        isFinishProcess:1,
        isMaterialArrvie:0,
        isMaterialTailor:1,
      },
      search:{
        drawCode:"",
        makeNo:"",
        code:"",
        taskSerialNo:"",
        taskNo:'',
        customer:'',
        code29:'',
      },
      dialog:{/**弹框配置 */
        title:'',
        isShow:false,
        type:'',
        formData:{},
        activeName:'2',
        otherUpDataData:{},
        tableData:[],
        drawCode:''
      },
      dialog1:{
        title:'',
        type:'',
        isShow:false,
        formData:{}
      },
      dialog2:{
        type:'',
        title:'',
        isShow:false,
        formData:{}
      },
      dialog3:{
        type:'',
        title:'',
        isShow:false,
        formData:{}
      },
      /**excel导入弹框*/ 
      dialog4:{
        title:'',
        isShow:false,
        formData:{},
        rules:{
          belongToYearMonth:[{ required: true, message: '请选择计划所属年月', trigger: 'blur'}],
          belongToWeek:[{ required: true, message: '请选择计划所属周', trigger: 'blur'}]
        }
      }
    }
  },
  mounted(){
    this.status = this.$route.query.status;
    this.getTablList();
  },
  created(){
    
  },
  watch: {
    $route(){
      this.status = this.$route.query.status;
      this.search.drawCode="";
      this.search.makeNo="";
      this.search.taskSerialNo="";
      this.search.code="";
      this.getTablList();
    }
  },
  computed:{
    importStatus(){
      return this.$store.state.importStatus
    },
    importDialog(){
      return this.$store.state.importDialog
    }
  },
  methods:{
    /**29所计划列表 */
    getTablList(){
      let self = this;
      self.postData.drawCode=self.search.drawCode;
      self.postData.makeNo=self.search.makeNo;
      self.postData.code=self.search.code;
      self.postData.taskSerialNo=self.search.taskSerialNo;
      self.postData.isMaterialTailor=self.status;
      self.postData.taskNo=self.search.taskNo;
      self.postData.customer=self.search.customer;
      self.postData.code29=self.search.code29;
      self.$refs.tableList29.get29TableList()
    },
    showConfirmBox(){
      let self = this;
      self.isShowConfirmBox = true;
    },
    searchBtn(){
      this.getTablList();
    },
    showDialog(type,row){
      this.dialog.activeName='6';
      this.dialog.type = type;
      switch(type){
        case 'insert':
          this.dialog.isShow=true;
          this.dialog.formData={};
          this.dialog.title = '新增计划任务';
          break;
        case 'update':
          this.dialog.isShow=true;
          this.dialog.formData = row;
          this.dialog.title = '计划详情';
          this.dialog.drawCode = row.drawCode; 
          this.dialog.otherUpDataData.drawNo=row.drawCode;
          break;
        case 'print':
           this.dialog.formData = row;
           this.$refs.print1.getCgPdfData(row.id);
          break;
      } 
    },
    showDialog1(type,row){
      this.dialog1.isShow=true;
      this.dialog1.type=type;
      switch(type){
        case 'insert':
          this.dialog1.formData={};
          this.dialog1.title = '新增29所工艺详情';
          break;
        case 'update':
          this.dialog1.formData = row;
          this.dialog1.title = '编辑29所工艺详情';
          break;
      }
    },
    showDialog2(type,row){
      let self = this;
      self.dialog2.type = type;
      if(row){
        row.person=Number(row.person);
        row.checkPerson=Number(row.checkPerson);
        row.cjCheckPerson=Number(row.cjCheckPerson);
      }  
      switch(type){
        case 'update':
          self.dialog2.isShow=true;
          self.dialog2.formData=row;
          self.dialog2.title ="编辑工艺编制";
          self.dialog2.formData.draw=self.dialog2.formData.draw?self.dialog2.formData.draw:{};
           materielApi.technologyInfo({drawNo:self.dialog.drawCode}).then(res=>{
              self.dialog2.isShow=true;
              if(res.content){
                self.dialog2.formData.draw=res.content;
              }
            })
          break;
        case 'upload':
          self.dialog2.isShow=true;
          self.dialog2.formData=row;
          self.dialog2.title ="工艺上传列表";
          break;
      }
    },
    /**显示Excel弹框*/ 
    showDialog4(){
      let self = this;
      if(self.importStatus!=='3'){
          self.$store.commit('updateImportDialog',true)
      }else{
        self.dialog4.isShow= true;
        self.dialog4.title = '导入Excel文件';
      }   
    },
    /**详情切换tab*/ 
    dialogHandleClick(){
      let self = this;
      switch(self.dialog.activeName){
        case '2':
          self.$refs.processPlanList29Ref.getProcessPlanList();
          break;
         case '3':
           self.$refs.drawing.getTableList();
          break;
         case '4':
           self.$refs.technology.getTableList();
          break;
        case '5':
          self.$refs.graphicsFile.getTableList();
          break;
        case '6':
          self.$refs.processPlanListRef.getProcessPlanList();
          break;
      }
    },
    /**打开弹框*/ 
    openedDialog(){
      if(this.dialog.type==='update'&&this.dialog.activeName==='6'){
        this.$refs.processPlanListRef.getProcessPlanList();
      }
    },
    dialog2Opened(){
      this.dialog2.type==='upload'?this.$refs.processUploadRef.getTableList():'';
    },
    /**到料签收*/ 
    confirmHandle(row){
      let self  = this;
      self.dialog3.isShow = true;
      self.confirmForm.id = row.id;
      // self.$msgbox({
      //   title:'到料签收',
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      // }).then(() => {
        // }).catch(()=>{})
    },
    submitConfirmBox(){
      let self = this;
      let params={
              "id":self.confirmForm.id ,
              "isMaterialArrvie": null, //物料是否到达
              "materialArriveTime": self.confirmForm.materialArriveTime,//到料日期
              "code29":self.confirmForm.code29//29所条码编号
          }
        materielApi.materialArriveconfirm(params).then(res=>{
            self.$message.success("确认成功");
            self.dialog3.isShow = false;
            self.getTablList();
        });
    },
    httpRequest(param){
      let self = this;
      let form =new FormData();
      // form.append('belongToYearMonth', self.dialog4.formData.belongToYearMonth);
      // form.append('belongToWeek', self.dialog4.formData.belongToWeek);
      form.append('file', param.file)
      planApi.planTaskListFor29Input(form).then(res=>{
        self.dialog4.isShow = false;
        self.$refs.uploadExcelRef.clearFiles();
        self.$message.success('上传成功');
        
        self.getTablList();
      })
    },
    uploadExcel(){
      let self = this;
      self.$refs['excelRef'].validate((valid) => {
          if (valid) {
            if(self.$refs.uploadExcelRef.uploadFiles.length>0){
              self.$refs.uploadExcelRef.submit()
            }else{
              self.$message.error("请选择要上传的Excel!")
            }
          } else {
            return false;
          }
        });
      
    }
  }
}
</script>
<style lang="stylus" scoped>
  .addRole
    padding-bottom 10px
</style>